<template>
	<view class="page-home">
		<swiper class="index-swiper" :indicator-dots="true" indicator-active-color="#fff" :autoplay="true"
			:interval="3000" :duration="1000">
			<swiper-item v-for="banner in swiper">
				<view class="swiper-item" :style="{backgroundImage: banner.img}" @tap="toDetail(banner.link)"></view>
			</swiper-item>
		</swiper>
		<!-- 球馆信息 -->
		<MxArenaInfo />
		<!-- 推荐卡项 -->
		<!-- <MxRecomCard :list="membercardList" class="cmp-recom-card" /> -->
		<!-- 推荐课程 -->
		<!-- <MxRecomCourse :list="courseList" /> -->
		
		<hans-tabbar :list="tabBarList" :current="tabCurrent" style="position:fixed;bottom:0;width:100%;left:0;right:0;" @tabChange="tabChange" />
		
<!-- 		<view class="page-my-arena">
			<view class="title">预约记录</view>
			<MxMyArenaCard class="cmp-my-arena-card" v-for="order in orderList" :order="order" />
			<EmptyData v-if="!hasBooking" />
		</view> -->

	</view>
</template>

<script>
	
	import {
		imgUrl
	} from '@/utils/config.js'
	import MxArenaInfo from '@/components/index/MxArenaInfo.vue'
	import MxRecomCard from '@/components/index/MxRecomCard.vue'
	import MxRecomCourse from '@/components/index/MxRecomCourse.vue'
	import * as bannerApi from '@/api/banner.js'
	import * as membercardApi from '@/api/membercard.js'
	import * as courseApi from '@/api/course.js'
	import baseMixin from '@/common/mixins/base.js'
	import HansTabbar from '@/components/common/hans-tabbar/hans-tabbar.vue'
	import storage from '@/utils/storage'
	import MyArena from '@/pages/mine/my-arena.vue'
	import MxMyArenaCard from '@/components/mine/my-arena/MxMyArenaCardIndex.vue';
	import EmptyData from '@/components/common/EmptyData.vue'
	import * as arenaApi from '@/api/arena.js'
	export default {
		components: {
			MxArenaInfo,
			MxRecomCard,
			MxRecomCourse,
			HansTabbar,
			MyArena,
			MxMyArenaCard,
			EmptyData
		},
		mixins: [baseMixin],
		data() {
			return {
				banners: [],
				courseList: [],
				membercardList: [],
				orderList: []
			}
		},
		computed: {
			swiper() {
				return this.banners.map(banner => {
					return {
						img: `url(${imgUrl + banner.image.file_path})`,
						link: banner.link
					}
				})
			},
			hasBooking() {
				return this.orderList.length !== 0
			}
		},
		onLoad() {

			// 获取推荐课程列表
			// this.getRecomCourses()
			// 获取推荐会员卡列表
			// this.getRecomCards()
			// 获取banner里列表
			this.getBanners()
			
			arenaApi.userBooking().then(res => {
				this.orderList = res.data
			})
		},
		methods: {
			getRecomCourses() {
				courseApi.recommends().then(res => {
					this.courseList = res.data
				})
			},

			getRecomCards() {
				membercardApi.recommends().then(res => {
					this.membercardList = res.data
				})
			},

			getBanners() {
				bannerApi.all().then(res => {
					this.banners = res.data
				})

			},

			// 跳转banner指定link
			toDetail(link) {
				if (link) {
					uni.navigateTo({
						url: link
					})
				}
			},
			
			/*分享当前页面*/
			onShareAppMessage() {
				let self = this;
				return {
					title: '恩平市体育馆',
					path: '/pages/index/index'
				};
			},
			onShareTimeline(){
				return {
				  title: "恩平市体育馆",
				  path: `/pages/index/index`
				 }
			}
		
		}
	}
</script>

<style scoped lang="scss">
	@import '@/common/scss/mixins.scss';

	page {
		background-color: #E4E4E4;
	}

	.page-home {
		padding-bottom: 64px;
		.index-swiper {
			height: 330rpx;

			.swiper-item {
				width: 100%;
				height: 100%;
				@include bg-img-cover;
			}
		}

		.cmp-recom-card {
			display: block;
			margin: 26rpx 0;
		}
	}
	
	.page-my-arena {
		padding-bottom: 80rpx;
		padding-left: 24rpx;
		padding-right: 24rpx;
		.title{
			margin: 10rpx;
		}
	}
</style>
